<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>镇长日志 - 模拟经营游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="js/core.js"></script>
    <!-- 调试脚本 -->
    <script src="js/debug-login.js" defer></script>
    <!-- 引入拆分后的CSS文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/pages/common.css">
    <link rel="stylesheet" href="css/pages/index.css">
    <link rel="stylesheet" href="css/pages/index-sidebar.css">
    <link rel="stylesheet" href="css/pages/rpg-style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2D6A4F',     // 自然绿色 - 主色调
                        secondary: '#95D5B2',   // 浅绿色 - 辅助色
                        accent: '#FFB703',      // 琥珀色 - 强调色
                        danger: '#E63946',      // 红色 - 危险色
                        success: '#4CAF50',     // 绿色 - 成功色
                        warning: '#FF9800',     // 橙色 - 警告色
                        dark: '#1B263B',        // 深蓝色 - 文字色
                        light: '#F8F9FA',       // 浅色 - 背景色
                        earth: '#8B4513',       // 土色 - 建筑相关
                        wood: '#DEB887',        // 木材色
                        food: '#8BC34A',        // 食物色
                        people: '#F08080',      // 人口色
                        stone: '#A0A0A0',       // 石头色
                        iron: '#708090',        // 铁矿色
                        gold: '#FFD700',        // 黄金色
                        crystal: '#B9F2FF'      // 水晶色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    backgroundImage: {
                        'village-bg': "url('https://picsum.photos/id/1043/1920/1080')",
                    }
                },
            }
        }
    </script>
    <style>
        /* 游戏标签页按钮样式 */
        .game-tab-btn {
            @apply px-4 py-2 rounded-lg text-center transition-colors duration-200 ease-in-out;
            @apply bg-gray-100 hover:bg-gray-200 font-medium flex flex-col items-center justify-center;
        }
        .game-tab-btn.active {
            @apply bg-primary text-white hover:bg-primary/90;
        }
        .game-tab-btn i {
            @apply text-xl mb-1;
        }
        
        /* 游戏面板样式 */
        .game-panel {
            @apply transition-all duration-300 ease-in-out;
        }
        .game-panel.hidden {
            @apply hidden opacity-0;
        }
        .game-panel.active {
            @apply block opacity-100;
        }
        
        /* 任务标签页按钮样式 */
        .quest-tab-btn {
            @apply hover:text-primary transition-colors duration-200 ease-in-out;
        }
        .quest-tab-btn.active {
            @apply text-primary border-b-2 border-primary;
        }
        
        /* 任务标签页内容样式 */
        .quest-tab {
            @apply transition-all duration-300 ease-in-out;
        }
        .quest-tab.hidden {
            @apply hidden opacity-0;
        }
        .quest-tab.active {
            @apply block opacity-100;
        }
        
        /* 科技卡片样式 */
        .tech-card {
            @apply border rounded-lg p-4 hover:shadow-md transition-all duration-200;
        }
        .tech-card .tech-icon {
            @apply w-12 h-12 rounded-full flex items-center justify-center text-2xl mb-2;
        }
        .tech-card .tech-cost {
            @apply mt-2 flex flex-wrap gap-2;
        }
        .tech-cost-item {
            @apply px-2 py-1 rounded-full text-xs flex items-center;
        }
        
        /* 合成配方卡片样式 */
        .recipe-card {
            @apply border rounded-lg p-4 hover:shadow-md transition-all duration-200;
        }
        .recipe-card .recipe-io {
            @apply flex items-center justify-between my-2;
        }
        .recipe-ingredient, .recipe-output {
            @apply px-2 py-1 rounded-full text-xs flex items-center;
        }
        
        /* 探索区域卡片样式 */
        .area-card {
            @apply border rounded-lg p-4 hover:shadow-md transition-all duration-200;
        }
        .area-card .area-image {
            @apply w-full h-32 rounded-md bg-gray-200 mb-2 overflow-hidden;
        }
        .area-card .area-cost {
            @apply mt-2 flex flex-wrap gap-2;
        }
        .area-cost-item {
            @apply px-2 py-1 rounded-full text-xs flex items-center;
        }
        
        /* 任务卡片样式 */
        .quest-card {
            @apply border rounded-lg p-4 hover:shadow-md transition-all duration-200;
        }
        .quest-card .quest-progress {
            @apply mt-2;
        }
        .quest-objective {
            @apply flex items-center justify-between my-1;
        }
        .quest-reward {
            @apply px-2 py-1 rounded-full text-xs flex items-center;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark min-h-screen flex flex-col">
    <!-- 游戏背景 -->
    <div class="fixed inset-0 z-0 opacity-10 bg-cover bg-center bg-village-bg"></div>
    
    <!-- 导航栏 -->
    <nav id="game-navbar" class="bg-primary/95 text-white shadow-lg z-50 sticky top-0">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-home text-2xl text-accent"></i>
                <h1 class="text-xl font-bold">镇长日志</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-4">
                <span id="stage-display" class="px-3 py-1 bg-accent/20 rounded-full text-sm">
                    <i class="fa fa-map-marker mr-1"></i>
                    <span id="current-stage">生存阶段</span>
                </span>
                <span id="consecutive-days" class="px-3 py-1 bg-accent/20 rounded-full text-sm">
                    <i class="fa fa-calendar-check-o mr-1"></i>
                    连续签到 <span id="days-count">1</span> 天
                </span>
            </div>
            
            <div class="flex items-center space-x-4">
                <!-- 用户菜单 - 带下拉功能 -->
                <div class="relative">
                    <button id="user-menu-btn" class="flex items-center space-x-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors group">
                            <div id="avatar-placeholder" class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center">
                                <i class="fa fa-user text-dark"></i>
                            </div>
                            <span id="user-name" class="text-sm font-medium">
                                <!-- 这里会显示用户名，确保清晰可见 -->
                                登录/注册
                            </span>
                            <i class="fa fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                        </button>
                    
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-2 z-50 hidden">
                        <!-- 登录/注册部分 (未登录时显示) -->
                        <div id="login-register" class="px-4 py-2">
                            <p class="text-sm text-gray-500 mb-2">请登录或注册以开始游戏</p>
                            <div class="flex flex-col space-y-2">
                                <a href="pages/user/login.html" class="px-4 py-2 bg-secondary text-dark rounded-md text-sm hover:bg-secondary/90 transition-colors">
                                    <i class="fa fa-sign-in mr-2"></i>登录
                                </a>
                                <a href="pages/user/register.html" class="px-4 py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-user-plus mr-2"></i>注册
                                </a>
                            </div>
                        </div>
                        
                        <!-- 用户信息部分 (登录后显示) -->
                        <div id="user-info" class="hidden">
                                <div class="px-4 py-3 border-b border-gray-200">
                                    <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-900"><span id="dropdown-username">小镇名称</span></p>
                                        <span class="text-xs text-gray-600 font-medium">小镇</span>
                                    </div>
                                    <div id="dropdown-avatar" class="w-8 h-8 rounded-full overflow-hidden">
                                        <img src="" alt="用户头像" class="w-full h-full object-cover">
                                    </div>
                                    </div>
                                </div>
                                <div class="px-4 py-2 text-sm text-gray-500">
                                    <p>游戏积分: <span id="dropdown-points">0</span></p>
                                </div>
                                <a href="pages/user/user-center.html" class="w-full text-left px-4 py-2.5 text-sm text-primary font-medium bg-primary/10 hover:bg-primary/20 transition-colors rounded-md my-1">
                                    <i class="fa fa-user-circle mr-2"></i>个人中心
                                </a>
                                <button id="change-avatar-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-camera mr-2"></i>修改头像
                                </button>
                                <button id="logout-btn" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                    </div>
                </div>
                
                <!-- 兼容旧版显示 - 保留但隐藏 -->
                <div id="auth-buttons" class="hidden"></div>
            </div>
        </div>
    </nav>
    
    <script>
        // 用户菜单下拉功能和用户信息显示
        document.addEventListener('DOMContentLoaded', function() {
            const userMenuBtn = document.getElementById('user-menu-btn');
            const userDropdown = document.getElementById('user-dropdown');
            const userNameElement = document.getElementById('user-name');
            const dropdownUsername = document.getElementById('dropdown-username');
            const loginRegisterSection = document.getElementById('login-register');
            const userInfoSection = document.getElementById('user-info');
            
            // 检查登录状态并更新用户信息显示
            function checkLoginStatus() {
                // 使用 getUserInfo 函数获取用户信息（支持多个键）
                const user = getUserInfo();
                if (user) {
                    try {
                        // 添加调试信息
                        console.log('=== AI调试信息（主页）===');
                        console.log('用户数据:', user);
                        console.log('小镇名称(username):', user.username);
                        console.log('================');
                        
                        // 确保显示有效的小镇名称
            let townName = user.username;
            if (!townName || typeof townName !== 'string') {
                townName = '快乐小镇'; // 默认小镇名称
            }
                        
                        // 更新显示
                        if (userNameElement) userNameElement.textContent = townName;
                        if (dropdownUsername) dropdownUsername.textContent = townName;
                        
                        // 切换显示登录/用户信息区域
                        if (loginRegisterSection) loginRegisterSection.classList.add('hidden');
                        if (userInfoSection) userInfoSection.classList.remove('hidden');
                        
                    } catch (error) {
                        console.error('解析用户信息失败:', error);
                    }
                }
            }
            
            // 初始检查登录状态
            checkLoginStatus();
            
            if (userMenuBtn && userDropdown) {
                // 点击切换下拉菜单
                userMenuBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userDropdown.classList.toggle('hidden');
                    // 点击时再次检查登录状态，确保信息最新
                    checkLoginStatus();
                });
                
                // 悬停显示下拉菜单（增强用户体验）
                userMenuBtn.addEventListener('mouseenter', function() {
                    userDropdown.classList.remove('hidden');
                });
                
                userMenuBtn.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        const isHovering = userDropdown.matches(':hover') || userMenuBtn.matches(':hover');
                        if (!isHovering) {
                            userDropdown.classList.add('hidden');
                        }
                    }, 200);
                });
                
                userDropdown.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        const isHovering = userDropdown.matches(':hover') || userMenuBtn.matches(':hover');
                        if (!isHovering) {
                            userDropdown.classList.add('hidden');
                        }
                    }, 200);
                });
                
                // 点击页面其他地方关闭下拉菜单
                document.addEventListener('click', function() {
                    userDropdown.classList.add('hidden');
                });
                
                // 阻止下拉菜单内的点击事件冒泡
                userDropdown.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            // 页面加载时更新用户信息显示
            if (typeof updateUserInfo === 'function') {
                updateUserInfo();
            }
            
            // 头像设置功能
            const avatarModal = document.getElementById('avatar-modal');
            const avatarModalContent = document.getElementById('avatar-modal-content');
            const changeAvatarBtn = document.getElementById('change-avatar-btn');
            const closeAvatarModal = document.getElementById('close-avatar-modal');
            const avatarUpload = document.getElementById('avatar-upload');
            const uploadButton = document.getElementById('upload-button');
            const urlButton = document.getElementById('url-button');
            const avatarUrlInput = document.getElementById('avatar-url');
            const resetAvatarBtn = document.getElementById('reset-avatar-btn');
            const confirmAvatarBtn = document.getElementById('confirm-avatar-btn');
            const currentAvatarPreview = document.getElementById('current-avatar-preview');
            const fileName = document.getElementById('file-name');
            const dropdownAvatar = document.getElementById('dropdown-avatar');
            const dropdownAvatarImg = dropdownAvatar ? dropdownAvatar.querySelector('img') : null;
            
            // 存储待确认的头像
            let pendingAvatarUrl = null;
            
            // 打开头像设置模态框
            if (changeAvatarBtn && avatarModal && avatarModalContent) {
                changeAvatarBtn.addEventListener('click', function() {
                    // 获取当前用户头像
                    const user = typeof getUserInfo === 'function' ? getUserInfo() : null;
                    const defaultAvatar = './default-avatar.svg';
                    const currentAvatar = user && user.avatar ? user.avatar : defaultAvatar;
                    
                    // 更新预览
                    if (currentAvatarPreview) {
                        currentAvatarPreview.src = currentAvatar;
                    }
                    
                    // 重置表单
                    if (avatarUpload) avatarUpload.value = '';
                    if (avatarUrlInput) avatarUrlInput.value = '';
                    if (fileName) fileName.textContent = '';
                    if (confirmAvatarBtn) confirmAvatarBtn.disabled = true;
                    pendingAvatarUrl = null;
                    
                    // 显示模态框
                    avatarModal.classList.remove('hidden');
                    setTimeout(() => {
                        avatarModalContent.classList.remove('scale-95', 'opacity-0');
                    }, 10);
                    
                    // 阻止页面滚动
                    document.body.style.overflow = 'hidden';
                });
            }
            
            // 关闭头像设置模态框
            function closeModal() {
                if (avatarModalContent) {
                    avatarModalContent.classList.add('scale-95', 'opacity-0');
                }
                setTimeout(() => {
                    if (avatarModal) {
                        avatarModal.classList.add('hidden');
                    }
                    document.body.style.overflow = '';
                }, 300);
            }
            
            if (closeAvatarModal) {
                closeAvatarModal.addEventListener('click', closeModal);
            }
            
            // 点击模态框外部关闭
            if (avatarModal) {
                avatarModal.addEventListener('click', function(e) {
                    if (e.target === avatarModal) {
                        closeModal();
                    }
                });
            }
            
            // 处理文件上传按钮点击
            if (uploadButton && avatarUpload) {
                uploadButton.addEventListener('click', function() {
                    avatarUpload.click();
                });
            }
            
            // 处理文件选择
            if (avatarUpload && fileName && confirmAvatarBtn && currentAvatarPreview) {
                avatarUpload.addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        fileName.textContent = file.name;
                        
                        // 预览选中的图片
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            currentAvatarPreview.src = e.target.result;
                            pendingAvatarUrl = null; // 重置待确认的URL，等待上传处理
                            confirmAvatarBtn.disabled = false;
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }
            
            // 处理URL输入
            if (urlButton && avatarUrlInput && confirmAvatarBtn && currentAvatarPreview) {
                urlButton.addEventListener('click', function() {
                    const url = avatarUrlInput.value.trim();
                    if (url) {
                        // 验证URL格式
                        try {
                            new URL(url);
                            
                            // 预加载图片以验证
                            const img = new Image();
                            img.onload = function() {
                                currentAvatarPreview.src = url;
                                pendingAvatarUrl = url;
                                confirmAvatarBtn.disabled = false;
                                if (fileName) fileName.textContent = '';
                                if (avatarUpload) avatarUpload.value = '';
                            };
                            img.onerror = function() {
                                if (typeof showNotification === 'function') {
                                    showNotification('图片无效', '无法加载指定的图片URL', 'error');
                                }
                            };
                            img.src = url;
                        } catch (e) {
                            if (typeof showNotification === 'function') {
                                showNotification('URL无效', '请输入有效的图片URL', 'error');
                            }
                        }
                    }
                });
            }
            
            // 重置为默认头像
            if (resetAvatarBtn && confirmAvatarBtn && currentAvatarPreview) {
                resetAvatarBtn.addEventListener('click', function() {
                    currentAvatarPreview.src = './default-avatar.svg';
                    pendingAvatarUrl = './default-avatar.svg';
                    confirmAvatarBtn.disabled = false;
                    if (fileName) fileName.textContent = '';
                    if (avatarUpload) avatarUpload.value = '';
                    if (avatarUrlInput) avatarUrlInput.value = '';
                });
            }
            
            // 确认修改头像
            if (confirmAvatarBtn && avatarUpload) {
                confirmAvatarBtn.addEventListener('click', async function() {
                    try {
                        let finalAvatarUrl = pendingAvatarUrl;
                        
                        // 如果是文件上传
                        if (avatarUpload.files.length > 0 && typeof uploadAvatar === 'function') {
                            finalAvatarUrl = await uploadAvatar(avatarUpload.files[0]);
                        }
                        
                        // 设置头像
                        if (finalAvatarUrl && typeof setUserAvatar === 'function') {
                            setUserAvatar(finalAvatarUrl);
                        }
                        
                        // 关闭模态框
                        closeModal();
                    } catch (error) {
                        if (typeof showNotification === 'function') {
                            showNotification('更新失败', error || '头像更新失败，请重试', 'error');
                        }
                    }
                });
            }
            
            // 更新用户信息时同时更新下拉菜单中的头像
            const originalUpdateUserInfo = window.updateUserInfo;
            if (typeof originalUpdateUserInfo === 'function') {
                window.updateUserInfo = function() {
                    // 调用原始函数
                    originalUpdateUserInfo();
                    
                    // 更新下拉菜单中的头像
                    const user = typeof getUserInfo === 'function' ? getUserInfo() : null;
                    if (user && dropdownAvatarImg) {
                        const defaultAvatar = './default-avatar.svg';
                        dropdownAvatarImg.src = user.avatar ? user.avatar : defaultAvatar;
                    }
                };
            }
            
            // 退出登录功能
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function() {
                    // 确认退出
                    if (confirm('确定要退出登录吗？')) {
                        try {
                            // 清除所有用户相关的localStorage数据
                            localStorage.removeItem('currentUser');
                            localStorage.removeItem('user');
                            localStorage.removeItem('userInfo');
                            
                            // 更新UI显示
                            if (loginRegisterSection) loginRegisterSection.classList.remove('hidden');
                            if (userInfoSection) userInfoSection.classList.add('hidden');
                            if (userNameElement) userNameElement.textContent = '登录/注册';
                            
                            // 关闭下拉菜单
                            if (userDropdown) userDropdown.classList.add('hidden');
                            
                            // 显示退出成功通知
                            if (typeof showNotification === 'function') {
                                showNotification('退出成功', '您已成功退出登录', 'success');
                            } else {
                                alert('您已成功退出登录');
                            }
                            
                            // 刷新页面以重置游戏状态
                            location.reload();
                        } catch (error) {
                            console.error('退出登录出错:', error);
                            if (typeof showNotification === 'function') {
                                showNotification('退出失败', '退出登录过程中发生错误', 'error');
                            } else {
                                alert('退出登录失败，请重试');
                            }
                        }
                    }
                });
            }
        });
    </script>
    
    <!-- 测试脚本，帮助验证登录功能 -->
    <!-- 原test-login.js已移除 -->

    <!-- 移动端顶部固定状态栏已移除，改用侧边栏显示资源 -->
    
    <!-- 顶部欢迎横幅 - 精简版 -->
    <section class="bg-gradient-to-r from-primary to-secondary text-white shadow-lg z-40 mt-2">
        <div class="container mx-auto px-4 py-3">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <h2 class="text-lg md:text-xl font-bold mb-2 md:mb-0">欢迎来到模拟经营游戏平台</h2>
                <div class="flex space-x-3">
                    <a href="pages/games/games_list.html" class="px-4 py-2 bg-accent text-dark font-medium rounded-lg hover:bg-accent/90 transition-colors flex items-center text-sm">
                        <i class="fa fa-gamepad mr-2"></i>
                        游戏大厅
                    </a>
                    <a href="pages/user/user-center.html" class="px-4 py-2 bg-white text-primary font-medium rounded-lg hover:bg-white/90 transition-colors flex items-center text-sm">
                        <i class="fa fa-user-circle mr-2"></i>
                        个人中心
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle" id="sidebar-toggle">
        <i class="fa fa-chevron-left"></i>
    </button>

    <!-- 侧边栏 - 精简版 -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>快速导航</h3>
            <button class="close-sidebar" id="close-sidebar">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="sidebar-content">
            <!-- 快速操作 -->
            <div class="sidebar-section">
                <h4 class="sidebar-section-title">
                    <i class="fa fa-bolt text-accent"></i>常用功能
                </h4>
                <div class="space-y-2">
                    <a href="pages/games/games_list.html" class="quick-action-btn w-full flex items-center justify-start px-4 py-3">
                        <i class="fa fa-gamepad quick-action-icon mr-3"></i>
                        <span class="quick-action-text">游戏大厅</span>
                    </a>
                    <a href="pages/user/user-center.html" class="quick-action-btn w-full flex items-center justify-start px-4 py-3">
                        <i class="fa fa-user-circle quick-action-icon mr-3"></i>
                        <span class="quick-action-text">个人中心</span>
                    </a>
                    <a href="pages/shop/shop.html" class="quick-action-btn w-full flex items-center justify-start px-4 py-3">
                        <i class="fa fa-shopping-bag quick-action-icon mr-3"></i>
                        <span class="quick-action-text">游戏商店</span>
                    </a>
                    <a href="pages/shop/points.html" class="quick-action-btn w-full flex items-center justify-start px-4 py-3">
                        <i class="fa fa-star quick-action-icon mr-3"></i>
                        <span class="quick-action-text">积分任务</span>
                    </a>
                </div>
            </div>

            <!-- 帮助信息 -->
            <div class="sidebar-section">
                <h4 class="sidebar-section-title">
                    <i class="fa fa-info-circle text-primary"></i>游戏提示
                </h4>
                <div class="sidebar-event">
                    <div class="sidebar-event-title">新手指引</div>
                    <div class="sidebar-event-desc">查看主界面的资源卡片了解当前状态，使用快捷操作快速访问各个功能模块。</div>
                </div>
            </div>
        </div>
    </aside>

        <!-- 主要游戏区域 -->
    <main class="flex-grow container mx-auto px-4 py-6 pb-20 z-10 relative main-content" id="main-content">
        <!-- 标签页导航 -->
        <div class="bg-white rounded-t-xl shadow-md mb-0">
            <div class="flex border-b border-gray-200 overflow-x-auto">
                <button class="dashboard-tab active" data-tab="overview">
                    <i class="fa fa-dashboard mr-2"></i>
                    <span>概览</span>
                </button>
                <button class="dashboard-tab" data-tab="shortcuts">
                    <i class="fa fa-bolt mr-2"></i>
                    <span>快捷操作</span>
                </button>
                <button class="dashboard-tab" data-tab="activities">
                    <i class="fa fa-calendar mr-2"></i>
                    <span>活动更新</span>
                </button>
                <button class="dashboard-tab" data-tab="events">
                    <i class="fa fa-bell mr-2"></i>
                    <span>事件日志</span>
                </button>
            </div>
        </div>

        <!-- 标签页内容容器 -->
        <div class="bg-white rounded-b-xl shadow-md p-6 mb-6">
            <!-- 概览标签页 - RPG游戏风格 -->
            <div id="tab-overview" class="tab-content active">
                <div class="auto-grid-3">
                    <!-- 木材资源卡片 - RPG风格 -->
                    <div class="rpg-card wood-card">
                        <div class="rpg-card-header">
                            <div class="rpg-icon-container wood-glow">
                                <i class="fa fa-tree"></i>
                                <div class="icon-shine"></div>
                            </div>
                            <div class="rpg-card-title">
                                <span class="resource-label">木材储备</span>
                                <span class="resource-type">Material</span>
                            </div>
                        </div>
                        <div class="rpg-card-body">
                            <div class="resource-value-container">
                                <span class="resource-value" data-target="1250" id="wood-value">0</span>
                                <span class="resource-unit">单位</span>
                            </div>
                            <div class="resource-bar-container">
                                <div class="resource-bar-bg">
                                    <div class="resource-bar wood-bar" data-progress="75"></div>
                                    <div class="bar-shine"></div>
                                </div>
                                <span class="resource-bar-text">储备: 75%</span>
                            </div>
                        </div>
                        <div class="rpg-card-footer">
                            <div class="stat-item">
                                <i class="fa fa-arrow-up"></i>
                                <span>产量 <strong class="text-success">+<span data-target="50" id="wood-rate">0</span>/时</strong></span>
                            </div>
                        </div>
                    </div>

                    <!-- 粮食资源卡片 - RPG风格 -->
                    <div class="rpg-card food-card">
                        <div class="rpg-card-header">
                            <div class="rpg-icon-container food-glow">
                                <i class="fa fa-leaf"></i>
                                <div class="icon-shine"></div>
                            </div>
                            <div class="rpg-card-title">
                                <span class="resource-label">粮食储备</span>
                                <span class="resource-type">Resource</span>
                            </div>
                        </div>
                        <div class="rpg-card-body">
                            <div class="resource-value-container">
                                <span class="resource-value" data-target="890" id="food-value">0</span>
                                <span class="resource-unit">单位</span>
                            </div>
                            <div class="resource-bar-container">
                                <div class="resource-bar-bg">
                                    <div class="resource-bar food-bar" data-progress="60"></div>
                                    <div class="bar-shine"></div>
                                </div>
                                <span class="resource-bar-text">储备: 60%</span>
                            </div>
                        </div>
                        <div class="rpg-card-footer">
                            <div class="stat-item">
                                <i class="fa fa-arrow-down text-danger"></i>
                                <span>消耗 <strong class="text-danger">-<span data-target="35" id="food-rate">0</span>/时</strong></span>
                            </div>
                        </div>
                    </div>

                    <!-- 人口资源卡片 - RPG风格 -->
                    <div class="rpg-card people-card">
                        <div class="rpg-card-header">
                            <div class="rpg-icon-container people-glow">
                                <i class="fa fa-users"></i>
                                <div class="icon-shine"></div>
                            </div>
                            <div class="rpg-card-title">
                                <span class="resource-label">人口数量</span>
                                <span class="resource-type">Population</span>
                            </div>
                        </div>
                        <div class="rpg-card-body">
                            <div class="resource-value-container">
                                <span class="resource-value" data-target="45" id="pop-current">0</span>
                                <span class="resource-separator">/</span>
                                <span class="resource-value-max" data-target="100" id="pop-max">0</span>
                            </div>
                            <div class="resource-bar-container">
                                <div class="resource-bar-bg">
                                    <div class="resource-bar people-bar" data-progress="45"></div>
                                    <div class="bar-shine"></div>
                                </div>
                                <span class="resource-bar-text">容量: 45%</span>
                            </div>
                        </div>
                        <div class="rpg-card-footer">
                            <button class="rpg-button" id="dashboard-recruit-btn">
                                <i class="fa fa-user-plus"></i>
                                <span>招募村民</span>
                                <div class="button-shine"></div>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 玩家状态面板 -->
                <div class="mt-6 rpg-status-panel">
                    <div class="status-panel-header">
                        <i class="fa fa-trophy text-warning"></i>
                        <span class="status-title">镇长等级</span>
                        <span class="status-level">Lv.<span data-target="5" id="player-level">0</span></span>
                    </div>
                    <div class="status-panel-body">
                        <div class="exp-bar-container">
                            <div class="exp-bar-bg">
                                <div class="exp-bar" data-progress="65"></div>
                                <div class="exp-shine"></div>
                            </div>
                            <div class="exp-text">
                                <span>经验值: <strong><span data-target="650" id="player-exp">0</span></strong> / 1000</span>
                                <span class="exp-percentage">65%</span>
                            </div>
                        </div>
                        <div class="status-stats">
                            <div class="stat-badge">
                                <i class="fa fa-star text-warning"></i>
                                <span>在线天数: <strong data-target="12" id="online-days">0</strong></span>
                            </div>
                            <div class="stat-badge">
                                <i class="fa fa-check-circle text-success"></i>
                                <span>任务完成: <strong data-target="8" id="tasks-done">0</strong> / 10</span>
                            </div>
                            <div class="stat-badge">
                                <i class="fa fa-coins text-warning"></i>
                                <span>金币: <strong data-target="5420" id="gold-coins">0</strong></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快捷操作标签页 -->
            <div id="tab-shortcuts" class="tab-content">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <!-- 游戏大厅 -->
                    <a href="pages/games/games_list.html" class="flex flex-col items-center p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl hover:shadow-lg transition-all group border border-primary/20">
                        <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform shadow-lg">
                            <i class="fa fa-gamepad text-3xl text-white"></i>
                        </div>
                        <span class="text-base font-semibold text-gray-700">游戏大厅</span>
                        <span class="text-xs text-gray-500 mt-1">探索精品游戏</span>
                    </a>

                    <!-- 个人中心 -->
                    <a href="pages/user/user-center.html" class="flex flex-col items-center p-6 bg-gradient-to-br from-secondary/10 to-secondary/5 rounded-xl hover:shadow-lg transition-all group border border-secondary/20">
                        <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform shadow-lg">
                            <i class="fa fa-user-circle text-3xl text-dark"></i>
                        </div>
                        <span class="text-base font-semibold text-gray-700">个人中心</span>
                        <span class="text-xs text-gray-500 mt-1">管理个人信息</span>
                    </a>

                    <!-- 商店 -->
                    <a href="pages/shop/shop.html" class="flex flex-col items-center p-6 bg-gradient-to-br from-accent/10 to-accent/5 rounded-xl hover:shadow-lg transition-all group border border-accent/20">
                        <div class="w-20 h-20 bg-accent rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform shadow-lg">
                            <i class="fa fa-shopping-bag text-3xl text-dark"></i>
                        </div>
                        <span class="text-base font-semibold text-gray-700">游戏商店</span>
                        <span class="text-xs text-gray-500 mt-1">购买游戏道具</span>
                    </a>

                    <!-- 积分任务 -->
                    <a href="pages/shop/points.html" class="flex flex-col items-center p-6 bg-gradient-to-br from-warning/10 to-warning/5 rounded-xl hover:shadow-lg transition-all group border border-warning/20">
                        <div class="w-20 h-20 bg-warning rounded-full flex items-center justify-center mb-3 group-hover:scale-110 transition-transform shadow-lg">
                            <i class="fa fa-star text-3xl text-white"></i>
                        </div>
                        <span class="text-base font-semibold text-gray-700">积分任务</span>
                        <span class="text-xs text-gray-500 mt-1">完成任务赚积分</span>
                    </a>
                </div>
            </div>

            <!-- 活动更新标签页 -->
            <div id="tab-activities" class="tab-content">
                <div class="space-y-4">
                    <!-- 新手礼包 -->
                    <div class="flex items-start p-4 bg-gradient-to-r from-warning/10 to-warning/5 rounded-xl border-l-4 border-warning hover:shadow-md transition-shadow">
                        <div class="flex-shrink-0 w-16 h-16 bg-warning/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fa fa-gift text-3xl text-warning"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-bold mb-1">新手礼包</h3>
                            <p class="text-sm text-gray-600 mb-3">新用户注册即可获得丰富游戏资源，助您快速发展小镇！包含木材×100、粮食×100、金币×500。</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar-check-o mr-1"></i>活动时间: 2025.10.01 - 2025.12.31
                                </span>
                                <a href="pages/user/user-center.html" class="px-5 py-2 bg-warning text-white rounded-lg hover:bg-warning/90 transition-colors text-sm font-medium">
                                    立即领取
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统更新 -->
                    <div class="flex items-start p-4 bg-gradient-to-r from-success/10 to-success/5 rounded-xl border-l-4 border-success hover:shadow-md transition-shadow">
                        <div class="flex-shrink-0 w-16 h-16 bg-success/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fa fa-refresh text-3xl text-success"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-bold mb-1">系统更新公告</h3>
                            <p class="text-sm text-gray-600 mb-3">我们优化了网站结构，游戏内容已迁移至专门的游戏页面，提供更好的用户体验。新增标签页导航，信息查看更便捷。</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-clock-o mr-1"></i>更新时间: 2025.10.31
                                </span>
                                <a href="pages/games/games_list.html" class="px-5 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-sm font-medium">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 即将上线 -->
                    <div class="flex items-start p-4 bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl border-l-4 border-primary hover:shadow-md transition-shadow">
                        <div class="flex-shrink-0 w-16 h-16 bg-primary/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fa fa-rocket text-3xl text-primary"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-bold mb-1">新游戏即将上线</h3>
                            <p class="text-sm text-gray-600 mb-3">《贸易帝国》将于下月上线，建立贸易路线，打造自己的商业帝国！敬请期待更多精彩内容。</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fa fa-calendar mr-1"></i>预计上线: 2025.11.15
                                </span>
                                <span class="px-5 py-2 bg-gray-300 text-gray-600 rounded-lg text-sm font-medium cursor-not-allowed">
                                    敬请期待
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 事件日志标签页 -->
            <div id="tab-events" class="tab-content">
                <div class="auto-grid-2">
                    <!-- 左列：当前事件 -->
                    <div>
                        <h3 class="text-lg font-bold mb-4 flex items-center text-gray-800">
                            <i class="fa fa-bell text-warning mr-2"></i>
                            当前事件
                        </h3>
                        <div id="current-events" class="space-y-3 min-h-[300px]">
                            <div id="no-events" class="text-center py-12 bg-gray-50 rounded-xl">
                                <i class="fa fa-inbox text-5xl mb-3 opacity-20 text-gray-400"></i>
                                <p class="text-gray-500">暂无进行中的事件</p>
                                <p class="text-xs text-gray-400 mt-1">事件会在游戏中自动触发</p>
                            </div>
                            <!-- 事件卡片将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 右列：镇长日志 -->
                    <div>
                        <h3 class="text-lg font-bold mb-4 flex items-center text-gray-800">
                            <i class="fa fa-history text-primary mr-2"></i>
                            镇长日志
                        </h3>
                        <div id="event-log" class="h-80 overflow-y-auto p-4 bg-gray-50 rounded-xl text-sm space-y-2">
                            <div class="text-center py-12">
                                <i class="fa fa-book text-5xl mb-3 opacity-20 text-gray-400"></i>
                                <p class="text-gray-500">暂无日志记录</p>
                                <p class="text-xs text-gray-400 mt-1">您的操作记录将显示在这里</p>
                            </div>
                            <!-- 日志内容将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 通知弹窗 -->
    <div id="notification" class="fixed bottom-16 md:bottom-6 right-6 bg-dark text-white p-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notification-icon" class="fa fa-info-circle mr-2 text-accent"></i>
        <span id="notification-title" class="font-bold mr-2"></span>
        <span id="notification-message">通知消息</span>
    </div>
    
    <!-- 底部导航栏 -->
    <div id="bottom-navbar" class="fixed bottom-0 left-0 right-0 bg-white/95 shadow-lg border-t border-gray-200 z-50 backdrop-blur-sm">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center py-3 px-6 text-primary relative">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs font-medium">首页</span>
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-primary rounded-t-full"></span>
            </a>
            <a href="pages/games/games_list.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </a>
            <a href="pages/shop/shop.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-shopping-bag text-xl mb-1"></i>
                <span class="text-xs">商店</span>
            </a>
            <a href="pages/user/user-center.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>
    
    <!-- 头像设置模态框 -->
    <div id="avatar-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="avatar-modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-900">修改头像</h3>
                    <button id="close-avatar-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 当前头像预览 -->
                <div class="flex justify-center mb-6">
                    <div class="w-32 h-32 rounded-full overflow-hidden border-4 border-primary/20 shadow-md">
                        <img id="current-avatar-preview" src="" alt="当前头像" class="w-full h-full object-cover">
                    </div>
                </div>
                
                <!-- 头像选择方式 -->
                <div class="space-y-4">
                    <!-- 本地上传选项 -->
                    <div class="border p-4 rounded-lg">
                        <label class="block text-sm font-medium text-gray-700 mb-2">本地上传图片</label>
                        <div class="flex items-center space-x-4">
                            <input type="file" id="avatar-upload" accept="image/*" class="hidden">
                            <button id="upload-button" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex-1">
                                <i class="fa fa-upload mr-2"></i>选择图片
                            </button>
                            <span id="file-name" class="text-sm text-gray-500 truncate"></span>
                        </div>
                        <p class="mt-2 text-xs text-gray-500">支持JPG、PNG、GIF格式，大小不超过5MB</p>
                    </div>
                    
                    <!-- URL输入选项 -->
                    <div class="border p-4 rounded-lg">
                        <label for="avatar-url" class="block text-sm font-medium text-gray-700 mb-2">输入图片URL</label>
                        <div class="flex">
                            <input type="text" id="avatar-url" placeholder="https://example.com/avatar.jpg" class="flex-1 px-4 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary">
                            <button id="url-button" class="px-4 py-2 bg-secondary text-dark rounded-r-md hover:bg-secondary/90 transition-colors">
                                使用URL
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 底部按钮 -->
                <div class="mt-6 flex space-x-3 justify-end">
                    <button id="reset-avatar-btn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                        重置为默认头像
                    </button>
                    <button id="confirm-avatar-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors" disabled>
                        确认修改
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面初始化脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 标签页切换功能
            const tabs = document.querySelectorAll('.dashboard-tab');
            const tabContents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');

                    // 移除所有active类
                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(c => c.classList.remove('active'));

                    // 添加active类到当前标签
                    this.classList.add('active');
                    document.getElementById(`tab-${targetTab}`).classList.add('active');

                    // 保存当前标签到localStorage
                    localStorage.setItem('currentDashboardTab', targetTab);

                    // 如果切换到概览标签，触发动画
                    if (targetTab === 'overview') {
                        setTimeout(() => {
                            initRPGAnimations();
                        }, 100);
                    }
                });
            });

            // 恢复上次选择的标签页
            const savedTab = localStorage.getItem('currentDashboardTab');
            if (savedTab) {
                const savedTabBtn = document.querySelector(`[data-tab="${savedTab}"]`);
                if (savedTabBtn) {
                    savedTabBtn.click();
                }
            } else {
                // 默认加载概览标签的动画
                initRPGAnimations();
            }

            // 页面初始化逻辑
            console.log('首页初始化完成 - RPG游戏化风格');
        });

        // ========== RPG动画系统 ==========
        function initRPGAnimations() {
            // 数字滚动动画
            animateCountUp();
            // 进度条动画
            animateProgressBars();
        }

        // 数字滚动动画（CountUp Effect）
        function animateCountUp() {
            const elements = document.querySelectorAll('[data-target]');

            elements.forEach(el => {
                const target = parseInt(el.getAttribute('data-target'));
                const duration = 2000; // 2秒
                const startTime = performance.now();
                const startValue = 0;

                // 使用缓动函数
                function easeOutExpo(t) {
                    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
                }

                function updateNumber(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);
                    const easedProgress = easeOutExpo(progress);
                    const current = Math.floor(startValue + (target - startValue) * easedProgress);

                    el.textContent = current;

                    if (progress < 1) {
                        requestAnimationFrame(updateNumber);
                    } else {
                        el.textContent = target;
                    }
                }

                requestAnimationFrame(updateNumber);
            });
        }

        // 进度条动画
        function animateProgressBars() {
            const bars = document.querySelectorAll('[data-progress]');

            bars.forEach(bar => {
                const targetProgress = parseInt(bar.getAttribute('data-progress'));
                const duration = 1500; // 1.5秒
                const startTime = performance.now();

                // 缓动函数
                function easeOutCubic(t) {
                    return 1 - Math.pow(1 - t, 3);
                }

                function updateProgress(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);
                    const easedProgress = easeOutCubic(progress);
                    const current = easedProgress * targetProgress;

                    bar.style.width = current + '%';

                    if (progress < 1) {
                        requestAnimationFrame(updateProgress);
                    } else {
                        bar.style.width = targetProgress + '%';
                    }
                }

                // 先设置为0
                bar.style.width = '0%';
                // 延迟300ms开始动画
                setTimeout(() => {
                    requestAnimationFrame(updateProgress);
                }, 300);
            });
        }

        // 页面可见性变化时重新触发动画
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                const overviewTab = document.getElementById('tab-overview');
                if (overviewTab && overviewTab.classList.contains('active')) {
                    initRPGAnimations();
                }
            }
        });
    </script>
        
        // 侧边栏功能
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化侧边栏功能
            initSidebar();
            
            // 显示通知功能
            window.showNotification = function(message, title = '', type = 'info') {
                const notification = document.getElementById('notification');
                const notificationIcon = document.getElementById('notification-icon');
                const notificationTitle = document.getElementById('notification-title');
                const notificationMessage = document.getElementById('notification-message');
                
                if (!notification || !notificationIcon || !notificationMessage) return;
                
                if (title) {
                    notificationTitle.textContent = title + ': ';
                    notificationTitle.classList.remove('hidden');
                } else {
                    notificationTitle.textContent = '';
                    notificationTitle.classList.add('hidden');
                }
                
                notificationMessage.textContent = message;
                
                // 设置图标和颜色
                let iconClass = 'fa-info-circle text-accent';
                if (type === 'success') iconClass = 'fa-check-circle text-success';
                else if (type === 'error') iconClass = 'fa-exclamation-circle text-danger';
                else if (type === 'warning') iconClass = 'fa-exclamation-triangle text-warning';
                
                notificationIcon.className = `fa ${iconClass} mr-2`;
                
                // 显示通知
                notification.classList.remove('translate-y-20', 'opacity-0');
                
                // 3秒后隐藏
                setTimeout(() => {
                    notification.classList.add('translate-y-20', 'opacity-0');
                }, 3000);
            };
        });
        
        // 使元素可拖动（垂直方向）
        function makeDraggable(element) {
            let isDragging = false;
            let startY, startTop;
            
            // 鼠标/触摸开始事件
            element.addEventListener('mousedown', startDrag);
            element.addEventListener('touchstart', startDrag, { passive: false });
            
            function startDrag(e) {
                // 如果是点击而非拖动意图，不阻止默认行为
                if (e.target.tagName === 'I') return;
                
                e.preventDefault();
                isDragging = true;
                
                // 记录初始位置
                startY = e.clientY || e.touches[0].clientY;
                startTop = parseInt(window.getComputedStyle(element).top);
                
                // 改变光标样式
                element.style.cursor = 'grabbing';
                
                // 添加移动和结束事件监听
                document.addEventListener('mousemove', drag);
                document.addEventListener('touchmove', drag, { passive: false });
                document.addEventListener('mouseup', stopDrag);
                document.addEventListener('touchend', stopDrag);
            }
            
            function drag(e) {
                if (!isDragging) return;
                e.preventDefault();
                
                // 计算新位置
                const clientY = e.clientY || e.touches[0].clientY;
                const offsetY = clientY - startY;
                const newTop = startTop + offsetY;
                
                // 限制拖动范围，不能拖到屏幕外
                const minTop = 60; // 导航栏高度
                const maxTop = window.innerHeight - element.offsetHeight - 20; // 留出一些底部空间
                
                const constrainedTop = Math.max(minTop, Math.min(newTop, maxTop));
                
                // 应用新位置
                element.style.top = constrainedTop + 'px';
                
                // 保存位置到本地存储
                localStorage.setItem('sidebarTogglePosition', JSON.stringify({
                    top: constrainedTop
                }));
            }
            
            function stopDrag() {
                if (!isDragging) return;
                
                isDragging = false;
                element.style.cursor = 'grab';
                
                // 移除事件监听
                document.removeEventListener('mousemove', drag);
                document.removeEventListener('touchmove', drag);
                document.removeEventListener('mouseup', stopDrag);
                document.removeEventListener('touchend', stopDrag);
            }
        }
        
        // 初始化侧边栏功能
        function initSidebar() {
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const closeSidebar = document.getElementById('close-sidebar');
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            
            // 检查用户的侧边栏偏好设置
            const sidebarOpen = localStorage.getItem('sidebarOpen') === 'true';
            if (sidebarOpen) {
                sidebar.classList.add('open');
                sidebarToggle.classList.add('open');
                if (window.innerWidth >= 768) {
                    mainContent.classList.add('sidebar-open');
                }
            }
            
            // 恢复保存的按钮位置
            const savedTogglePosition = localStorage.getItem('sidebarTogglePosition');
            if (savedTogglePosition) {
                try {
                    const position = JSON.parse(savedTogglePosition);
                    if (position && position.top) {
                        sidebarToggle.style.top = position.top + 'px';
                    }
                } catch (e) {
                    console.error('无法恢复侧边栏按钮位置', e);
                }
            }
            
            // 切换侧边栏
            sidebarToggle.addEventListener('click', function() {
                sidebar.classList.toggle('open');
                sidebarToggle.classList.toggle('open');
                
                // 在桌面版上调整主内容区域
                if (window.innerWidth >= 768) {
                    mainContent.classList.toggle('sidebar-open');
                }
                
                // 保存用户的侧边栏偏好设置
                localStorage.setItem('sidebarOpen', sidebar.classList.contains('open'));
            });
            
            // 关闭侧边栏
            closeSidebar.addEventListener('click', function() {
                sidebar.classList.remove('open');
                sidebarToggle.classList.remove('open');
                
                if (window.innerWidth >= 768) {
                    mainContent.classList.remove('sidebar-open');
                }
                
                // 更新用户的侧边栏偏好设置
                localStorage.setItem('sidebarOpen', 'false');
            });
            
            // 添加拖动功能
            makeDraggable(sidebarToggle);
            
            // 侧边栏链接现在使用 <a> 标签，不需要额外的JavaScript处理
        }
    </script>
</body>
</html>